<script setup lang='ts'>
  import xmimg from '@/components/xmimg.vue';
  const props = defineProps({
    giftList:{
      type:Array<any>,
      default:()=>[]
    },
    titleImage:{
      type:String,
      default:''
    }
  })
</script>
<template>
  <div v-if="giftList.length > 0" class="giftListBack">
    <xmimg :src="titleImage" class="titleimg" />
    <div
      class="giftList flex"
      :style="{
        '--giftImageWidth':giftList.length > 4 ? '.84rem' : '.78rem',
        '--giftImageRight':giftList.length > 4 ? '.08rem' : '.07rem'
      }"
    >
      <div v-for="item in giftList" class="giftBox">
        <div class="giltImage">
          <xmimg :src="item.image" />
        </div>
        <div class="name">{{ item.name }}</div>
        <div class="price flex-align-center">
          <xmimg src="icon1.png" class="iconImage" />
          <span>{{ item.price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .giftListBack {
    width: 100%;
    height: 215px;
    background: left bottom / 100% 204px no-repeat;
    .titleimg {
      width: 203px;
      height: 58px;
      margin: 0 auto 11px;
    }
    .giftList::-webkit-scrollbar {
      display: none;
    }
    .giftList {
      overflow-y: hidden;
      overflow-x: auto;
      padding: 0 calc(12px - var(--giftImageRight)) 0 0;
      box-sizing: border-box;
      margin: 0 1px 0 13px;
      .giftBox {
        width: var(--giftImageWidth);
        margin-right: var(--giftImageRight);
        .giltImage {
          width: var(--giftImageWidth);
          height: var(--giftImageWidth);
          padding: 10px;
          box-sizing: border-box;
          background: var(--rankingGiftFooterBackImage) left bottom / 100% 100% no-repeat;
        }
        .name {
          font-size: 12px;
          font-weight: 500;
          text-align: center;
          margin: 9px 0 5px ;
        }
        .price {
          .iconImage {
            width: 13px;
            height: 13px;
            margin-right: 4px;
          }
          span {
            font-weight: 400;
            font-size: 12px;
          }
        }
      }
      .giftBox:nth-last-child(1) {
        margin-right: 0;
      }
    }
  }
</style>